<template>
  <view class="letter_container">
    <view class="video">
      <view class="video_content" @click="playVideo('1')">
        <view class="video_box">
          <view class="video_icon">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
              mode="widthFiX"
              style="width:39rpx;height:45rpx"
            ></image>
          </view>
        </view>
        <text>字母 A、B、C、D 的发音与书写</text>
      </view>
      <view class="video_content" @click="playVideo('2')">
        <view class="video_box">
          <view class="video_icon">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
              mode="widthFiX"
              style="width:39rpx;height:45rpx"
            ></image>
          </view>
        </view>
        <text>字母E、F、G、H、I的发音与书写</text>
      </view>
      <view class="video_content" @click="playVideo('3')">
        <view class="video_box">
          <view class="video_icon">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
              mode="widthFiX"
              style="width:39rpx;height:45rpx"
            ></image>
          </view>
        </view>
        <text>字母J、K、L、M、N的发音与书写</text>
      </view>
      <view class="video_content" @click="playVideo('4')">
        <view class="video_box">
          <view class="video_icon">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
              mode="widthFiX"
              style="width:39rpx;height:45rpx"
            ></image>
          </view>
        </view>
        <text>字母O、P、Q、R、S、T的发音与书写</text>
      </view>
      <view class="video_content" @click="playVideo('5')">
        <view class="video_box">
          <view class="video_icon">
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/play.png"
              mode="widthFiX"
              style="width:39rpx;height:45rpx"
            ></image>
          </view>
        </view>
        <text>字母U、V、W、X、Y、Z的发音与书写</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      videoUrl: "",
    };
  },
  onLoad() {},
  methods: {
    playVideo(type) {
      let videoUrl = "";
      if (type === "1") {
        videoUrl =
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/video/letterdiscrimination/video/ABCD.mp4?versionId=CAEQNxiBgMDBh9OrzxciIDc2ZTZjYjI0NWE0ODRhYzdhYmEzOTE4NDJmMzEzYzFm";
      } else if (type === "2") {
        videoUrl =
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/video/letterdiscrimination/video/EFGHI.mp4?versionId=CAEQNxiBgICDldOrzxciIDEwZGFiYzgzMDBkNzRmMTVhOGI4ZGFiMmU1NWY5Y2Vj";
      } else if (type === "3") {
        videoUrl =
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/video/letterdiscrimination/video/JKLMN.mp4?versionId=CAEQNxiBgID6yNOrzxciIGEwMzI0NmZkZTg5NDRhODk5MTAyMjAzMmI5NjFiOWIw";
      } else if (type === "4") {
        videoUrl =
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/video/letterdiscrimination/video/opqrst.mp4?versionId=CAEQNxiBgMDy89OrzxciIDYyNTk4MDQ5YjQ4ZjQ1NGRhZGYzNWMyZmZhZjViMzNh";
      } else if (type === "5") {
        videoUrl =
          "https://zxs-education.oss-cn-hangzhou.aliyuncs.com/wisdomoak/video/letterdiscrimination/video/UVWXYZ.mp4?versionId=CAEQNxiBgICYv9SrzxciIDA5YzQwY2ZjMzk5ZDRjNTNiMTE3NWVmMTk1OTEwOTlh";
      }
      this.videoUrl = videoUrl;
      this.$emit("play", this.videoUrl, true);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./LetterGuidance";
</style>
